<template>
  <div class="addMonthCarBgc">
    <!-- 导航栏 -->
    <div class="addMonthCard">
      <div class="addMonthCardCenter">
        <el-page-header @back="goBack">
          <template v-slot:content>
            <!-- 在这里定义您想要显示的内容 -->
            <span>查看企业</span>
          </template>
        </el-page-header>
      </div>
      <div class="addMonthCardCenter1">黑马程序员</div>
    </div>
    <div class="vehicle">
      <!-- 企业信息 -->
      <el-form ref="formDate" label-width="100px" class="demo-ruleForm">

        <el-card class="box-card" style="width:80vw">
          <div slot="header" class="clearfix">
            <span>企业信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="10"> <el-form-item label="企业名称:" prop="personName">
              <span>{{ infoList.name }}</span>
            </el-form-item></el-col>
            <el-col :span="4" />
            <el-col :span="10">
              <el-form-item label="法人:" prop="phoneNumber">
                <span>{{ infoList.legalPerson }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10"> <el-form-item label="注册地址:" prop="carNumber">
              <span>{{ infoList.registeredAddress }}</span>
            </el-form-item></el-col>
            <el-col :span="4" />
            <el-col :span="10">
              <el-form-item label="所在行业:" prop="carBrand">
                <span>{{ infoList.industryName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10"> <el-form-item label="营业执照:" prop="carNumber">
              <span><img :src="infoList.businessLicenseUrl" alt="" style="width: 250px"></span>
            </el-form-item></el-col>

          </el-row>
        </el-card>
        <!-- 联系人信息 -->
        <el-card class="box-card" style="width:80vw">
          <div slot="header" class="clearfix">
            <span>联系人信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="10"> <el-form-item label="企业联系人:" prop="personName">
              <span>{{ infoList.contact }}</span>
            </el-form-item></el-col>
            <el-col :span="4" />
            <el-col :span="10">
              <el-form-item label="联系电话:" prop="phoneNumber">
                <span>{{ infoList.contactNumber }}</span>
              </el-form-item>
            </el-col>
          </el-row>

        </el-card>
        <el-card class="MonthCard">
          <div slot="header" class="clearfix">
            <span>租赁记录
            </span>
          </div>
          <el-table
            :data="list"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              width="90"
            >1</el-table-column>
            <el-table-column
              prop="name"
              width="160"
              label="租赁楼宇"
            />

            <el-table-column
              prop="status"
              width="150"
              label="合同状态"
            >
              <template v-slot="{ row }">
                <span v-if="row.status === 0">待生效</span>
                <span v-else-if="row.status === 1">生效中</span>
                <span v-else-if="row.status === 2">已到期</span>
                <span v-else-if="row.status === 3">已退租</span>
              </template></el-table-column>
            <el-table-column
              prop="startTime"
              label="租赁起止时间"
              width="150"
            />
            <el-table-column
              prop="contractName"
              width="200"
              label="租赁合同"
            />
            <el-table-column
              prop="createTime"
              label="录入时间"
              width="160"
            />
            <el-table-column
              prop="paymentAmount"
              label="操作"
              width="200"
            ><button @click="downloadExcel">合同下载</button></el-table-column>
          </el-table>
        </el-card>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getParkEnterprise, postDownload } from '@/api/building/enterprise'
import FileSaver from 'file-saver'
export default {
  name: 'ViewMonthCard',
  data() {
    return {
      infoList: [{
        id: '', // 企业id
        name: '', // 企业名称
        legalPerson: '', // 企业法人
        registeredAddress: '', // 注册地址
        industryCode: '', // 行业编号
        industryName: '', // 行业名称
        businessLicenseUrl: '', // 上传文件url
        businessLicenseName: '', // 上传的营业执照名字
        businessLicenseId: '', // 上传文件id
        contact: '', // 企业联系人
        contactNumber: '' // 企业联系方式
      }],
      list: []
    }
  },
  async created() {
    if (this.$route.params.id) {
      const res = await getParkEnterprise(this.$route.params.id)
      console.log(res)
      this.infoList = res.data
      this.list = res.data.rent
    }
  },
  methods: {
    goBack() {
      this.$router.push('/enterPrise')
    },
    async downloadExcel() {
      const res = await postDownload(this.$route.params.id)
      FileSaver.saveAs(res, '合同下载.doc')
    }
  }
}
</script>

<style  scoped>
.addMonthCarBgc{
  width: 100%;
  height: 100%;
  background-color: #f4f6f8;
}
.addMonthCard{
 width: 100%;
 height: 60px;
 background-color: #fff;
 display: flex;
flex-direction:row;
justify-content:space-between;
 font-size: 18px;
}
.addMonthCardCenter{
  width: 200px;
  height: 70px;
 margin-top: 20px;
 margin-left: 20px;
}
.addMonthCardCenter1{
width: 100px;
height: 70px;
margin-top: 20px;
margin-right: 20px;
}
.vehicle{
  width: 100vw;
  /* margin-left: 140px; */
}
.box-card{
  margin-top: 30px;
   margin: 30px auto;
}
.queding{
  width: 100vw;
  height: 100px;
  background-color: #fff;
  margin-top: 140px;

    text-align: center;
    line-height: 100px;

}
.MonthCard{
    width: 1150px;
    margin: 0 auto;
}

</style>
